<template>
  <div id="learning" style="background: #fff">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--      <el-tab-pane name="first">-->
      <!--        <span slot="label" class="tabStyle"> 学习数据</span>-->
      <!--        &lt;!&ndash; 学习数据内同 &ndash;&gt;-->
      <!--        <div class="topBox" style="margin-top:20px ;">-->
      <!--          <textCard v-for="item in itemList" :item="item" :width="width" :key="item.id"></textCard>-->
      <!--        </div>-->

      <!--        <div class="leiBox">-->
      <!--          <meunBtn style="margin-top: 20px;" :list="meunBtnList" @change="changemeun"></meunBtn>-->
      <!--          <div class="cardBox">-->
      <!--            <jincard v-for="item in jincardList" :item="item" :key="item.id">-->
      <!--            </jincard>-->
      <!--          </div>-->

      <!--        </div>-->
      <!--        &lt;!&ndash; 学习数据内容结束 &ndash;&gt;-->
      <!--      </el-tab-pane>-->
      <el-tab-pane name="1">
        <span slot="label" class="tabStyle">
          学时
          <el-tooltip
            style="margin-left: 2px"
            class="item"
            effect="dark"
            content="用于记录您完成学习获得的奖励学时    "
            placement="top-start"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </span>
        <!-- 学时内容 -->
        <div class="topBox" style="margin-top: 20px">
          <textCard
            v-for="(item, index) in itemList2"
            :key="index"
            :item="item"
            :width="289"
          ></textCard>
        </div>
        <div class="table" style="margin-top: 30px">
          <h1>全部学时记录</h1>

          <div class="search">
            <el-date-picker
              v-model="query.creatorTime"
              value-format="timestamp"
              format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              type="daterange"
            />
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button
              type="text"
              icon="el-icon-download"
              style="margin-left: 10px"
              @click="exportForm"
              >导出</el-button
            >
          </div>
          <div class="tableBox" style="margin-top: 30px">
            <jsbos-table
              v-loading="listLoading"
              :data="tableData"
              ref="jsbosTableRef"
            >
              <el-table-column
                prop="resourceName"
                label="资源名称"
                width="0"
                align="left"
              />
              <el-table-column
                prop="resourceType"
                label="资源类型"
                width="100"
                align="left"
              />
              <el-table-column
                prop="num"
                label="数值"
                width="50"
                align="left"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="100"
                align="left"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="140"
                align="left"
              />
            </jsbos-table>
          </div>
        </div>

        <!-- 学时内容结束 -->
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label" class="tabStyle">
          学分
          <el-tooltip
            style="margin-left: 2px"
            class="item"
            effect="dark"
            content="用于记录您完成学习获得的奖励学分"
            placement="top-start"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </span>
        <!-- 学分内容 -->
        <div class="topBox" style="margin-top: 20px">
          <textCard
            v-for="item in itemList2"
            :item="item"
            :width="289"
            :key="item.id"
          ></textCard>
        </div>
        <div class="table" style="margin-top: 30px">
          <h1>全部学分内容</h1>

          <div class="search">
            <el-date-picker
              v-model="query.creatorTime"
              value-format="timestamp"
              format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              type="daterange"
            />
            <el-button type="primary" @click="initData">搜索</el-button>
          </div>
          <div class="tableBox" style="margin-top: 30px">
            <jsbos-table
              v-loading="listLoading"
              :data="tableData"
              ref="jsbosTableRef"
            >
              <el-table-column
                prop="resourceName"
                label="资源名称"
                width="0"
                align="left"
              />
              <el-table-column
                prop="resourceType"
                label="资源类型"
                width="100"
                align="left"
              />
              <el-table-column
                prop="num"
                label="数值"
                width="50"
                align="left"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="100"
                align="left"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="140"
                align="left"
              />
            </jsbos-table>
          </div>
        </div>

        <!-- 学分内容结束 -->
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label" class="tabStyle">
          积分<el-tooltip
            style="margin-left: 2px"
            class="item"
            effect="dark"
            content="用于记录您登录、分享、评论、资源学习等产生平台活跃度的积分奖励"
            placement="top-start"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </span>

        <!-- 积分内容 -->
        <div class="topBox" style="margin-top: 20px">
          <textCard
            v-for="item in itemList2"
            :item="item"
            :width="289"
            :key="item.id"
          ></textCard>
        </div>
        <div class="table" style="margin-top: 30px">
          <h1>全部积分记录</h1>

          <div class="search">
            <el-date-picker
              v-model="query.creatorTime"
              value-format="timestamp"
              format="yyyy-MM-dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              type="daterange"
            />
            <el-button type="primary" @click="initData">搜索</el-button>
          </div>
          <div class="tableBox" style="margin-top: 30px">
            <jsbos-table
              v-loading="listLoading"
              :data="tableData"
              ref="jsbosTableRef"
            >
              <el-table-column
                prop="resourceType"
                label="动作名称"
                width="100"
                align="center"
              />
              <el-table-column
                prop="resourceName"
                label="备注说明"
                width="0"
                align="left"
              />
              <el-table-column
                prop="num"
                label="数值"
                width="50"
                align="center"
              />
              <el-table-column
                prop="creatorUserId"
                label="创建用户"
                width="100"
                align="center"
              />
              <el-table-column
                prop="creatorTime"
                label="创建时间"
                width="140"
                align="center"
              />
            </jsbos-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import meunBtn from "./compents/meunBtn";
import textCard from "./compents/textCard";
import jincard from "./compents/jincard";
import request from "@/utils/request";

export default {
  name: "learning",
  data() {
    return {
      jincardList: [
        {
          img: require("../../../assets/learning/1.png"),
          title: "新员工自我管理",
          day: "逾期可学",
          value: "30",
          type: "新人培训",
        },
        {
          img: require("../../../assets/learning/2.png"),
          title: "培训项目体验学习",
          day: "147天",
          value: "40",
          type: "培训项目",
        },
        {
          img: require("../../../assets/learning/3.png"),
          title: "新员工岗位晋升培训",
          day: "720天",
          value: "0",
          type: "学习地图",
        },
        {
          img: require("../../../assets/learning/3.png"),
          title: "新员工岗位晋升培训",
          day: "720天",
          value: "0",
          type: "学习地图",
        },
      ],
      meunBtnkey: "全部",
      meunBtnList: [
        { name: "全部" },
        { name: "培训项目" },
        { name: "学习地图" },
        { name: "新人培训" },
        { name: "课程专题" },
        { name: "考试" },
        { name: "每日一练" },
        { name: "问卷" },
        { name: "直播" },
        { name: "面授" },
      ],
      activeName: "1",
      width: "212",
      itemList: [
        {
          num: 2,
          color: "rgb(23, 184, 126)",
          text: "完成在线课程数",
          numText: "",
        },
        {
          num: 33,
          color: "rgb(55, 125, 255)",
          text: "总学习时长",
          iscontent: "在线课程+考试用时+培训中的知识",
          numText: "min",
        },
        {
          num: 2,
          color: "rgb(255, 153, 0)",
          text: "本月学习时长排行",
          iscontent: "在线课程+考试用时+培训中的知识",
          numText: "",
        },
        {
          num: 6,
          color: "rgb(255, 109, 223)",
          text: "本月学习时长",
          iscontent: "在线课程+考试用时+培训中的知识",
          numText: "min",
        },
      ],
      itemList2: [
        {
          num: 0,
          color: "rgb(23, 184, 126)",
          text: "总学时",
          numText: "",
        },
        {
          num: 0,
          color: "rgb(55, 125, 255)",
          text: "本年获取学时",
          iscontent: "",
          numText: "",
        },
        {
          num: 0,
          color: "rgb(255, 153, 0)",
          text: "本月获取学时",
          iscontent: "",
          numText: "",
        },
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "",
      },
      query: {
        creatorUserId: undefined,
        type: 1,
        creatorTime: undefined,
      },
      tableData: [],
    };
  },
  components: {
    textCard,
    jincard,
    meunBtn,
  },
  mounted() {
    this.initData();
    this.getDetail();
  },
  beforeDestroy() {},
  methods: {
    handleClick(tab) {
      if (tab.name > 0) {
        this.query.type = tab.name;
        this.initData();
        this.getDetail();
      }
    },
    changemeun(key) {
      console.log("key", key);
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
      };
      request({
        url: `/api/course/TemsChpLogs/getList`,
        method: "post",
        data: _query,
      }).then((res) => {
        var _list = [];
        for (let i = 0; i < res.data.list.length; i++) {
          let _data = res.data.list[i];
          _list.push(_data);
        }
        this.tableData = _list;
        this.total = res.data.pagination.total;

        this.listLoading = false;
      });
    },
    getDetail() {
      this.listLoading = true;
      request({
        url: `/api/course/TemsChb/detail/` + this.query.type,
        method: "get",
      }).then((res) => {
        let data = res.data;
        let label = "";
        if (this.query.type === "1") {
          label = "学时";
        }
        if (this.query.type === "2") {
          label = "学分";
        }
        if (this.query.type === "3") {
          label = "积分";
        }
        this.itemList2 = [
          {
            num: data.totals || 0,
            color: "rgb(23, 184, 126)",
            text: "总" + label,
            numText: "",
          },
          {
            num: data.month || 0,
            color: "rgb(255, 153, 0)",
            text: "本月获取" + label,
            iscontent: "",
            numText: "",
          },
          {
            num: data.year || 0,
            color: "rgb(55, 125, 255)",
            text: "本年获取" + label,
            iscontent: "",
            numText: "",
          },
        ];
        this.listLoading = false;
      });
    },
  },
};
</script>
<style scoped lang="scss">
#learning {
  padding: 20px;
  float: right;
  margin-top: 20px;
  width: 955px;
  background-color: #fff;
}

.topBox {
  display: flex;
  justify-content: space-between;
  padding-bottom: 40px;
  border-bottom: 0.5px solid #f4f4f4;
}

.cardBox {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.tabStyle {
  font-size: 14px;
}

.search {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  width: 500px;
}
</style>
